<template>
  <div class="width-100 height-100 overflow-auto">
    <div class="padding">
      <div class="search-form">
        <el-form inline>
          <year-month-picker v-model="time"></year-month-picker>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <industry-chart title="行业能源消费统计" :chart-option="chartInfo"></industry-chart>
      <industry-table class="margin-top" :loading="loading" :lists="lists" @loadMore="loadMore"></industry-table>
    </div>
  </div>
</template>

<script>
import IndustryTable from './table'
import IndustryChart from './chart'
import TimePicker from '@/mixins/time-picker'
import { loadEnterpriseIndustryMapData, loadIndustryMapData, loadIndustryMonthMapData } from '@/api/enterprose'
import { defaultNumber, getEnergyUnitName, uuid } from '@/utils'
import { COAL, COMPREHENSIVE_CONSUMPTION, COMPREHENSIVE_CONSUMPTION_ZH, ELECTRIC, GAS, OTHER, WATER } from '@/config'

export default {
  name: 'industry-data-presentation',
  mixins: [TimePicker],
  components: {
    IndustryChart,
    IndustryTable,
  },
  data () {
    return {
      loading: false,
      data: [],
    }
  },
  computed: {
    energyVariety () {
      return this.$store.state.energyVariety
    },
    energyIndustry () {
      return this.data.map(v => v.name || v.belongIndustryName)
    },
    lists () {
      return this.data.map(v => ({
        id: v.id,
        _id: v._id,
        area: v.name,
        [COMPREHENSIVE_CONSUMPTION]: defaultNumber(v[COMPREHENSIVE_CONSUMPTION]),
        [COMPREHENSIVE_CONSUMPTION + 'Growth']: defaultNumber(v.comprehensiveEnergyConsumptionYearOnYear),
        [COMPREHENSIVE_CONSUMPTION + 'Ratio']: defaultNumber(v.comprehensiveEnergyConsumptionMonthOnMonth),
        [ELECTRIC]: defaultNumber(v[ELECTRIC]),
        [ELECTRIC + 'Growth']: defaultNumber(v.electricityYearOnYear),
        [ELECTRIC + 'Ratio']: defaultNumber(v.electricityMonthOnMonth),
        [WATER]: defaultNumber(v[WATER]),
        [WATER + 'Growth']: defaultNumber(v.waterYearOnYear),
        [WATER + 'Ratio']: defaultNumber(v.waterMonthOnMonth),
        [GAS]: defaultNumber(v[GAS]),
        [GAS + 'Growth']: defaultNumber(v.gasYearOnYear),
        [GAS + 'Ratio']: defaultNumber(v.gasMonthOnMonth),
        // 3.3+
        [COAL]: defaultNumber(v[COAL]),
        [COAL + 'Growth']: defaultNumber(v.coalYearOnYear),
        [COAL + 'Ratio']: defaultNumber(v.coalMonthOnMonth),
        [OTHER]: defaultNumber(v[OTHER]),
        [OTHER + 'Growth']: defaultNumber(v.otherYearOnYear),
        [OTHER + 'Ratio']: defaultNumber(v.otherMonthOnMonth),

        children: [],
        hasChildren: true,
      }))
    },
    chartInfo () {
      const energyIndustry = this.energyIndustry
      const energyStructure = [COMPREHENSIVE_CONSUMPTION_ZH, ...this.energyVariety.map(v => v.name)]
      const data = this.data
      return {
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        legend: {
          data: [...energyStructure],
        },
        grid: {
          left: '5%',
          right: '5%',
        },
        toolbox: {
          show: false,
          orient: 'horizontal',
          left: 'right',
          top: 'top',
          feature: {
            mark: { show: true },
            dataView: { show: true },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: [...energyIndustry],
          }
        ],
        yAxis: [
          {
            type: 'value',
            position: 'left',
            axisLine: {
              show: true,
            },
          },
          {
            type: 'value',
            position: 'right',
            axisLine: {
              show: true,
            },
          }
        ],
        series: [
          {
            name: COMPREHENSIVE_CONSUMPTION_ZH,
            type: 'bar',
            yAxisIndex: 0,
            data: data.map(v => v[COMPREHENSIVE_CONSUMPTION]),
            tooltip: {
              valueFormatter: value => `${defaultNumber(value)} ${getEnergyUnitName(COMPREHENSIVE_CONSUMPTION)}`
            },
          },
          ...this.energyVariety.map((v) => ({
            name: v.name,
            type: 'bar',
            yAxisIndex: 1,
            emphasis: {
              focus: 'series',
            },
            data: data.map(vv => vv[v.value]),
            tooltip: {
              valueFormatter: value => `${defaultNumber(value)} ${getEnergyUnitName(v.value)}`
            },
          }))
        ],
      }
    },
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      const isYear = this.isYear
      const loadList = isYear ? loadIndustryMapData : loadIndustryMonthMapData
      this.loading = true
      loadList(this.time).then(res => {
        if (res.code === 200) {
          this.data = res.data.map(v => ({
            ...v,
            id: uuid() + v.id, // row key
            _id: v.id,
            name: v.name,
            belongIndustry: v.id,
            belongIndustryName: v.name,
            enterpriseNumber: v.enterpriseNumber,
            [WATER]: v.water,
            [ELECTRIC]: v.electricity,
            [GAS]: v.gas,
            [COMPREHENSIVE_CONSUMPTION]: v.comprehensiveEnergyConsumption,
            maxConsumptionEnterprise: v.bigEnergyConsumer,
            // 3.3+
            [COAL]: v.coal,
            [OTHER]: v.other,
          }))
        }
      }).finally(() => {
        this.loading = false
      })
    },
    onSearch () {
      this.$nextTick(() => {
        this.getLists()
      })
    },
    loadMore (tree, treeNode, resolve) {
      const belongIndustry = tree._id
      if (belongIndustry) {
        loadEnterpriseIndustryMapData(this.time, belongIndustry).then(res => {
          res.data = res.data || []
          resolve(res.data.map(v => ({
            ...v,
            id: v.id,
            name: v.name,
            belongIndustry: v.id,
            belongIndustryName: v.name,
            enterpriseNumber: v.enterpriseNumber,
            [WATER]: v.water,
            [ELECTRIC]: v.electricity,
            [GAS]: v.gas,
            [COMPREHENSIVE_CONSUMPTION]: v.comprehensiveEnergyConsumption,
            maxConsumptionEnterprise: v.bigEnergyConsumer,
            // 3.3+
            [COAL]: v.coal,
            [OTHER]: v.other,
          })).map(v => ({
            id: v.id,
            area: v.name,
            [COMPREHENSIVE_CONSUMPTION]: defaultNumber(v[COMPREHENSIVE_CONSUMPTION]),
            [COMPREHENSIVE_CONSUMPTION + 'Growth']: defaultNumber(v.comprehensiveEnergyConsumptionYearOnYear),
            [COMPREHENSIVE_CONSUMPTION + 'Ratio']: defaultNumber(v.comprehensiveEnergyConsumptionMonthOnMonth),
            [ELECTRIC]: defaultNumber(v[ELECTRIC]),
            [ELECTRIC + 'Growth']: defaultNumber(v.electricityYearOnYear),
            [ELECTRIC + 'Ratio']: defaultNumber(v.electricityMonthOnMonth),
            [WATER]: defaultNumber(v[WATER]),
            [WATER + 'Growth']: defaultNumber(v.waterYearOnYear),
            [WATER + 'Ratio']: defaultNumber(v.waterMonthOnMonth),
            [GAS]: defaultNumber(v[GAS]),
            [GAS + 'Growth']: defaultNumber(v.gasYearOnYear),
            [GAS + 'Ratio']: defaultNumber(v.gasMonthOnMonth),
            // 3.3+
            [COAL]: defaultNumber(v[COAL]),
            [COAL + 'Growth']: defaultNumber(v.coalYearOnYear),
            [COAL + 'Ratio']: defaultNumber(v.coalMonthOnMonth),
            [OTHER]: defaultNumber(v[OTHER]),
            [OTHER + 'Growth']: defaultNumber(v.otherYearOnYear),
            [OTHER + 'Ratio']: defaultNumber(v.otherMonthOnMonth),

            children: null,
            hasChildren: false,
          })))
        })
      } else {
        resolve([])
      }
    },
  }
}
</script>
